import styles from './index.module.less';

import { Editor } from '@lle/d3-editor';

interface IProps {
  editor: Editor;
}

export const SideBar = (props: IProps) => {
  const { editor } = props;

  const onClickShow = () => {
    const entity = editor.core.lastSelection;
    if (entity) {
      entity.setAttr('visible', true);
    }
  };

  const onClickHide = () => {
    const entity = editor.core.lastSelection;
    if (entity) {
      entity.setAttr('visible', false);
    }
  };

  const onClickLock = () => {
    editor.lock();
  };

  const onClickUnlock = () => {
    editor.unlock();
  };

  return (
    <div className={styles.container}>
      <div className={styles.tool} title="显示" onClick={onClickShow}>
        <span className="iconfont icon-eye-fill font24" />
      </div>
      <div className={styles.tool} title="隐藏" onClick={onClickHide}>
        <span className="iconfont icon-eye-slash font24" />
      </div>
      <div className={styles.tool} title="锁定" onClick={onClickLock}>
        <span className="iconfont icon-suoding font24" />
      </div>
      <div className={styles.tool} title="解锁" onClick={onClickUnlock}>
        <span className="iconfont icon-kaisuo font24" />
      </div>
    </div>
  );
};
